<template>
  <div class="association-container">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <g-title title="我的协会" color="#333333" more="/articleDetail/17" />
      <div class="tab">
        <div class="box">
          <img src="../../assets/img/default-graph/tx.jpg" circle>
          <h3 fz14>羽毛球协会</h3>
        </div>
        <div class="box">
          <img src="../../assets/img/default-graph/tx.jpg" circle>
          <h3 fz14>羽毛球协会</h3>
        </div>
        <div class="box">
          <img src="../../assets/img/default-graph/tx.jpg" circle>
          <h3 fz14>羽毛球协会</h3>
        </div>
      </div>
      <g-title title="我的协会" color="#333333" more="/articleDetail/17" />
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <ass-item v-for="item in list" :key="item" :title="item" />
      </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
import assItem from '@/components/AssociationItem'
export default {
  components: {
    assItem
  },
  data() {
    return {
      bt1: 0,
      bt2: 1,
      bt3: 2,
      list: [],
      loading: false,
      refreshing: false,
      finished: false
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        this.loading = false

        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 600)
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  padding: 16px;
  display: flex;
  .box {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 8px 0 rgb(0 0 0 / 8%);
    align-items: center;
    padding: 15px 0;
    & +.box {
      margin-left: 10px;
    }
    img {
      width: 56px;
      height: 56px;
      margin-bottom: 10px;
    }
  }
}
</style>
